<template>
  <KView class="goods-detail-history" :style="detailStyle">
    <KView v-if="!isMiniprogram" class="goods-history-content">
      <transition name="move">
        <KView :key="key" class="goods-history-item">
          <KView v-for="history in historyList" :key="`history_${history.id}`" class="clearfix">
            <KView class="goods-history-item-notice">
              <img class="sys-img" :src="noticeImg" mode="aspectFit">
            </KView>
            <KView class="goods-history-item-time">{{history.timeStr}}</KView>
            <KView class="ellipsis goods-history-item-text">
              {{history.nickname}} {{history.typeText}}了该商品
            </KView>
          </KView>
        </KView>
      </transition>
    </KView>

    <template v-else>
      <wx-swiper :autoplay="true" :circular="true" class="goods-history-content" :interval="10000" :duration="1000" :vertical="true"
        easing-function="linear">
        <wx-swiper-item>
          <KView class="goods-history-item">
            <KView v-for="history in historyList" :key="`history_${history.id}`" class="clearfix">
              <KView class="goods-history-item-notice">
                <img class="sys-img" :src="noticeImg" mode="aspectFit">
              </KView>
              <KView class="goods-history-item-time">{{history.timeStr}}</KView>
              <KView class="ellipsis goods-history-item-text">
                {{history.nickname}} {{history.typeText}}了该商品
              </KView>
            </KView>
          </KView>
        </wx-swiper-item>
        <wx-swiper-item>
          <KView class="goods-history-item">
            <KView v-for="history in historyList" :key="`history_${history.id}`" class="clearfix">
              <KView class="goods-history-item-notice">
                <img class="sys-img" :src="noticeImg" mode="aspectFit">
              </KView>
              <KView class="goods-history-item-time">{{history.timeStr}}</KView>
              <KView class="ellipsis goods-history-item-text">
                {{history.nickname}} {{history.typeText}}了该商品
              </KView>
            </KView>
          </KView>
        </wx-swiper-item>
      </wx-swiper>
      <KView class="goods-detail-mask"></KView>
    </template>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins:[storeMixins],

    props: {
      historyList: {
        type: Array,
        required: true
      }
    },

    computed: {
      detailStyle() {
        let historyList = this.historyList;
        let len = historyList.length;
        let height = 40 * len + 30 * (len - 1);
        return {
          height: SystemUtil.formatPx(height)
        };
      },

      viewHeight() {
        let historyList = this.historyList;
        let len = historyList.length;
        let height = 40 * len + 30 * (len - 1);
        height = height * 750 / this.width;
        height = SystemUtil.ceilValue(height);
        return height;
      }
    },

    data() {
      return {
        key: SystemUtil.getId(),
        noticeImg: GlobalData.images.notice,
        isMiniprogram: process.env.isMiniprogram,
        timeout: null
      };
    },

    created() {
      if (!this.isMiniprogram) {
        this.resetHistoryList();
      }
    },

    beforeDestroy() {
      this.clearTimeout();
    },

    methods: {
      resetHistoryList() {
        let timeout = setTimeout(() => {
          this.key = SystemUtil.getId();
          this.timeout = null;
          this.resetHistoryList();
        }, 10000);
        this.timeout = timeout;
      },

      clearTimeout() {
        let timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
          this.timeout = null;
        }
      }
    }
  };

</script>

<style lang="scss">
  .goods-detail-history {
    position: relative;
    background: #F8F8F8;
    padding: formatPx(30) formatPx(25);
    overflow: auto;

    .goods-history-content {
      height: 100%;

      .goods-history-item {
        color: #666666;
        font-size: formatPx(24);
        height: 100%;

        >div {
          height: formatPx(40);
          margin-bottom: formatPx(30);

          &:last-child {
            margin-bottom: 0;
          }

          >div {
            float: left;
            height: 100%;
          }

          .goods-history-item-notice {
            width: formatPx(40);
            margin-right: formatPx(15);
          }

          .goods-history-item-time {
            width: formatPx(115);
            line-height: formatPx(40);
          }

          .goods-history-item-text {
            width: calc(100% - #{formatPx(170)});
            line-height: formatPx(40);
          }
        }
      }
    }
  }

  @if $isMini {
    .goods-detail-history {
      .goods-detail-mask {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  @else {
    .goods-detail-history {

      .move-enter-active,
      .move-leave-active {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all 1s;
        left: 0;
        top: 0;
      }

      .move-leave-to {
        top: -100%;
      }

      .move-enter {
        top: 100%;
      }
    }
  }

</style>
